<template>
  <div class="address-edit-page">
    <div class="address-edit-header">
      <svg class="back-arrow" viewBox="0 0 24 43" @click="$router.back()">
        <path d="M20 2 L4 21.5 L20 41" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>
      </svg>
      <span class="address-edit-title">创建新地址</span>
    </div>
    <div class="address-edit-form">
      <div class="form-tip">
        <span>复制地址，帮你快速填写</span>
        <button class="paste-btn" @click="handlePaste">粘贴并识别</button>
      </div>
      
      <!-- 手动粘贴区域 - 直接显示 -->
      <div class="manual-paste-area">
        <textarea v-model="manualPasteText" placeholder="请在此粘贴完整的地址信息（包含姓名、电话、地区、详细地址）"></textarea>
        <button class="parse-btn" @click="handleManualParse">识别地址</button>
      </div>
      
      <div class="form-item">
        <label>收货人<span class="required">*</span></label>
        <input type="text" placeholder="姓名" v-model="form.name" />
      </div>
      <div class="form-item">
        <label>联系电话<span class="required">*</span></label>
        <div class="phone-input">
          <span class="phone-prefix">+86</span>
          <input type="text" placeholder="手机号" v-model="form.phone" />
        </div>
      </div>
      <div class="form-item">
        <label>所在地区<span class="required">*</span></label>
        <input type="text" placeholder="省、市、区、街道" v-model="form.region" />
      </div>
      <div class="form-item">
        <label>详细地址<span class="required">*</span></label>
        <input type="text" placeholder="社区、门牌号等" v-model="form.detail" />
      </div>
      <div class="form-item form-switch">
        <label class="nowrap-label">设为默认地址</label>
        <input type="checkbox" v-model="isDefault" class="switch-input" />
        <span class="switch-slider" :class="{active: isDefault}"></span>
      </div>
    </div>
    <button class="save-btn" @click="handleSave">保存地址</button>
    <transition name="fade">
      <div v-if="showToast" class="toast-success">保存成功</div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'AddressEdit',
  data() {
    return {
      form: {
        name: '',
        phone: '',
        region: '',
        detail: ''
      },
      isDefault: false,
      showToast: false,
      showManualPaste: true, // 默认显示手动粘贴区域
      manualPasteText: ''
    }
  },
  methods: {
    async handlePaste() {
      let text = '';
      // #ifdef H5
      if (typeof navigator !== 'undefined' && navigator.clipboard) {
        try {
          text = await navigator.clipboard.readText();
        } catch (e) {
          alert('无法自动读取剪贴板，请直接在输入框中粘贴地址信息');
          return;
        }
      }
      // #endif
      // #ifndef H5
      if (typeof uni !== 'undefined' && uni.getClipboardData) {
        await new Promise((resolve) => {
          uni.getClipboardData({
            success: (res) => {
              text = res.data;
              resolve();
            },
            fail: () => {
              uni.showToast({ title: '无法自动读取剪贴板，请手动粘贴', icon: 'none' });
              resolve();
            }
          });
        });
      }
      // #endif
      if (!text) return;
      this.manualPasteText = text;
      this.parseAddressText(text);
    },
    handleManualParse() {
      if (!this.manualPasteText.trim()) {
        alert('请先粘贴地址内容');
        return;
      }
      this.parseAddressText(this.manualPasteText);
    },
    parseAddressText(text) {
      const nameMatch = text.match(/姓名[:：]?([\u4e00-\u9fa5]+)/);
      const phoneMatch = text.match(/联系电话[:：]?(\d{11})/);
      const regionMatch = text.match(/所在地区[:：]?([^\n]+)/);
      const detailMatch = text.match(/详细地址[:：]?([^\n]+)/);
      this.form.name = nameMatch ? nameMatch[1].trim() : '';
      this.form.phone = phoneMatch ? phoneMatch[1].trim() : '';
      this.form.region = regionMatch ? regionMatch[1].trim() : '';
      this.form.detail = detailMatch ? detailMatch[1].trim() : '';
    },
    handleSave() {
      this.showToast = true;
      setTimeout(() => {
        this.showToast = false;
        this.$router.replace('/home');
      }, 1000);
    }
  }
}
</script>

<style scoped>
.address-edit-page {
  background: #fff;
  min-height: 100vh;
  max-width: 750px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.address-edit-header {
  display: flex;
  align-items: center;
  height: 90px;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 30px;
  position: relative;
}
.back-arrow {
  width: 36px;
  height: 36px;
  margin-right: 20px;
  cursor: pointer;
}
.address-edit-title {
  font-size: 36px;
  font-weight: bold;
  color: #222;
  flex: 1;
  text-align: center;
}
.address-edit-form {
  padding: 30px 40px 0 40px;
}
.form-tip {
  display: flex;
  align-items: center;
  background: #fff5f7;
  border-radius: 16px;
  padding: 20px 24px;
  font-size: 26px;
  color: #999;
  margin-bottom: 24px;
  justify-content: space-between;
}
.paste-btn {
  background: #ffe8ec;
  color: #fe2c55;
  border: none;
  border-radius: 24px;
  font-size: 24px;
  padding: 10px 24px;
  cursor: pointer;
  font-weight: 500;
}
.manual-paste-area {
  background: #f9f9f9;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 30px;
  border: 1px dashed #ddd;
}
.manual-paste-area textarea {
  width: 100%;
  min-height: 120px;
  font-size: 28px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  color: #333;
  resize: none;
}
.parse-btn {
  width: 100%;
  background: #fe2c55;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 28px;
  padding: 14px 24px;
  cursor: pointer;
  font-weight: 500;
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 36px;
  font-size: 28px;
}
.form-item label {
  width: 140px;
  color: #222;
  font-size: 28px;
  font-weight: 500;
}
.required {
  color: #fe2c55;
  margin-left: 4px;
}
.form-item input[type="text"] {
  flex: 1;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  font-size: 28px;
  padding: 14px 0;
  background: transparent;
  outline: none;
  color: #222;
}
.phone-input {
  display: flex;
  align-items: center;
  flex: 1;
}
.phone-prefix {
  color: #999;
  font-size: 28px;
  margin-right: 12px;
}
.form-switch {
  justify-content: space-between;
}
.switch-input {
  display: none;
}
.switch-slider {
  width: 60px;
  height: 34px;
  background: #eee;
  border-radius: 17px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  transition: background 0.2s;
  margin-left: 12px;
}
.switch-slider::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s;
}
.switch-slider.active {
  background: #fe2c55;
}
.switch-slider.active::before {
  left: 30px;
  background: #fff;
}
.save-btn {
  width: 90%;
  margin: 50px auto 40px auto;
  background: #fe2c55;
  color: #fff;
  font-size: 32px;
  border: none;
  border-radius: 42px;
  height: 90px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(254,44,85,0.18);
  cursor: pointer;
}
.nowrap-label {
  white-space: nowrap;
}
.toast-success {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  background: rgba(254,44,85,0.95);
  color: #fff;
  font-size: 32px;
  padding: 32px 70px;
  border-radius: 36px;
  box-shadow: 0 6px 30px rgba(254,44,85,0.2);
  z-index: 9999;
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style> 